<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">

    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
    <style type="text/css">
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>

    <h:head>

    </h:head>
    <h:body>

        <ui:composition template="/resources/template/template.xhtml">
            <ui:define name="content">
                <h:form>
                    <p:panel header="Manage Nationalities" >

                        <table>
                            <tr>
                                <td>
                                    <p:inputText id="txtNewName" value="#{categoryController.selectText}" ></p:inputText>
                                    <p:commandButton id="btnNew"
                                                   ajax="false"
                                                     value="Add New"
                                                     process="btnNew txtNewName" 
                                                     update="repeatCats"
                                                    action="#{categoryController.addNationality()}">
                                    </p:commandButton>
                                </td>
                            </tr>
                        </table>



                        <table >
                            <tr>
                                <th>Nationality</th>
                            </tr>

                            <ui:repeat id="repeatCats" value="#{categoryController.nationalities}"
                                       var="cat"
                                       >
                                <tr>
                                    <td>
                                        <p:inputText id="txtName" value="#{cat.name}" >
                                            <f:ajax event="blur" execute="txtName" listener="#{categoryController.updateCategory(cat)}" ></f:ajax>
                                        </p:inputText>
                                    </td>
                                </tr>

                            </ui:repeat>
                        </table>



                    </p:panel>
                </h:form>
            </ui:define>


        </ui:composition>

    </h:body>
</html>
